<template>
	<view class="container">
		<view class="head_box">
			<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/b2b2c/31.png" mode="" @click="returnPage"></image>
			<view class="title">转账</view>
		</view>
		<view class="tip">如对方未实名认证，请先通知对方进行实名认证</view>
		<view class="from_box">
			<view class="name_box">
				<view class="left">对方手机号</view>
				<input type="text" placeholder="请输入对方手机号" v-model="phone" />
			</view>
			<view class="name_box">
				<view class="left">所转仓单额</view>
				<input type="text" placeholder="请输入仓单额" v-model="barPrice"/>
			</view>
		</view>
		<view class="xiayibu" v-if="!checkShow" @click="open1(0, 'center')">下一步</view>
		<view class="xia_check"  v-if="checkShow">
			<view class="tijiao" @click="two_comfirm(0, 'center')">提交</view>
			<view class="check">检查支付</view>
		</view>
		<openAlert class="openAlert1" ref="openAlert1" BgColor="rgba(0, 0, 0, 0.7)" :AlertClass="AlertClass"
			:AlertPosition="AlertPosition">
			<view class="modal_wrap" v-if="openshow">
				<view class="modal_title">温馨提示</view>
		
				<view class="modal_content">
					<view class="con_item">支付所需手续费{{(barPrice*0.05).toFixed(2)}}元</view>
				</view>
				<view class="btn_wrap">
					<view class="cancel_btn" @click.stop="cancel1">取消</view>
					<view class="modal_btns" @click="confirm">确定</view>
				</view>
			</view>
			<view class="modal_wrap" v-if="openshows">
				<view class="modal_title">温馨提示</view>
		
				<view class="modal_content">
					<view class="con_item">注意，不要退出页面，继续点击立即提交</view>
				</view>
				<view class="btn_wrap">
					<view class="cancel_btn" @click.stop="cancel1">取消</view>
					<view class="modal_btns" @click="checkPay">确定</view>
				</view>
			</view>
		</openAlert>
	</view>
</template>

<script>
	import openAlert from '@/components/open-alert/open-alert';
	export default {
		components: {
			openAlert,
		},
		data() {
			return {
				AlertClass: 0,
				AlertPosition: '',
				phone:'',
				barPrice:'',
				openshow: true,
				openshows: false,
				checkShow: false,
				token:''
			};
		},
		onLoad(option) {
			this.token=option.token
		},
		methods: {
			returnPage() {
				uni.navigateBack({
					delta: 1
				});
			},
			open1(Class, Position) {
				if (this.phone == "") {
					this.Unfold_data.showWindow("号码不能为空");
					return;
				};
				let url="/api/handover/Data/checkZhuanTidan"
				let params={
					token:this.token,
					number:this.barPrice,
					type:'易货',
					mobile:this.phone,
				}
				this.Unfold_data.upload_datas(params, 'POST', url, res => {
					if (res.data.code == 1) {
						this.$nextTick(function() {
							this.AlertClass = Class;
							this.AlertPosition = Position;
							this.$nextTick(function() {
								// console.log(this.$refs)
								this.$refs.openAlert1.Show();
							});
						});
					} else {
						this.Unfold_data.showWindow(res.data.msg);
					}
				});
				
			},
			two_comfirm(Class, Position) {
				if (this.phone == "") {
					this.Unfold_data.showWindow("号码不能为空");
					return;
				};
				this.$nextTick(function() {
					this.AlertClass = Class;
					this.AlertPosition = Position;
					this.$nextTick(function() {
						// console.log(this.$refs)
						this.$refs.openAlert1.Show();
					});
				});
			},
			
			confirm(){
			    sui.navigateTo({
			    	url:"../bar_pay/bar_pay?type=transfer"+"&price="+this.barPrice
			    })
			},
			
			cancel1() {
				this.$nextTick(function() {
					this.$refs.openAlert1.Close();
				});
			},
		},
	}
</script>

<style lang="scss" scoped>
	page{
		height: 100%;
		background-color: #f6f6f6;
	}
.container{
	.head_box {
		width: 750upx;
		height: 180upx;
		background:#D3484E;
		background-size: 750upx 180upx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding-top: 60upx;
		.title {
			font-size: 38upx;
			color: #ffffff;
			line-height: 71px;
			margin-left: 300upx;
		}
	
		image {
			width: 24upx;
			height: 40upx;
			margin-left: 20upx;
		}
	}
	.tip{
		width: 710upx;
		margin: 30upx auto 0;
		font-size: 30upx;
		color: #333333;
	}
	.from_box{
		width: 750upx;
		height: 200upx;
		margin-top: 30upx;
		padding: 0 20upx;
		background-color: #FFFFFF;
		.name_box{
			width: 710upx;
			height: 100upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1upx #ccc solid;
			.left{
				font-size: 32upx;
				color: #333333;
			}
		}
		.name_box:nth-child(2){
			border-bottom: none;
		}
	}
	.xiayibu{
		width: 600upx;
		height: 80upx;
		border-radius: 15upx;
		background-color:#D3484E;
		margin: 80upx auto 0;
		font-size: 32upx;
		color: #fff;
		text-align: center;
		line-height: 80upx;
	}
	.xia_check{
		width: 600upx;
		margin: 80upx auto 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.tijiao{
			width: 400upx;
			height: 80upx;
			background-color:#D3484E;
			font-size: 32upx;
			border-radius: 15upx;
			color: #fff;
			text-align: center;
			line-height: 80upx;
		}
		.check{
			width: 180upx;
			height: 80upx;
			background-color:#D3484E;
			font-size: 32upx;
			border-radius: 15upx;
			color: #fff;
			text-align: center;
			line-height: 80upx;
		}
	}
	.openAlert1 {
		width: 100%;
	
		.modal_wrap {
			width: 75vw;
			height: 350upx;
			background-color: #ffffff;
			border-radius: 20upx;
	
			.modal_title {
				width: 100%;
				height: 80upx;
				background: #bb2235;
				border-radius: 20upx 20upx 0 0;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
			}
	
			.modal_content {
				width: 70%;
				margin: 0 auto;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 40upx 0;
	
				.con_item {
					text-align: center;
					font-size: 30upx;
				}
			}
	
			.btn_wrap {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
	
				.cancel_btn {
					width: 200upx;
					margin: 0 auto;
					height: 60upx;
					margin-top: 20upx;
					border: 2upx solid #e85e5d;
					color: #ac1327;
					display: flex;
					align-items: center;
					justify-content: center;
				}
	
				.modal_btns {
					width: 200upx;
					margin: 0 auto;
					height: 60upx;
					margin-top: 20upx;
					background: linear-gradient(top, #ac1327, #e85e5d);
					color: #ffffff;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}
}
</style>
